/* eslint-disable */
/*eslint no-mixed-spaces-and-tabs: "error"*/
<template>
  <div id="abc">
    {{ message | capitalize }}
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
    <p style="font-size:25px;">计数器: {{ counter }}</p>
    <button v-on:click="cli" style="font-size:25px;">点我</button>
    <p>千米</p><input type="text" v-model="kilometers">
    <p>米</p><input type="text" v-model="meters">
    <div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'abc!',
        counter: 1,
        kilometers: 0,
        meters: 0,
        isActive: true,
        hasError: true
      }
    },
    methods: {
      cli() {
        this.counter++

        this.testP(1).then(res => {
          alert(123)
        }).catch(reason => {
          alert(98)
        })
      }
    },
    // 计算属性
    computed: {
      // 计算属性的 getter
      reversedMessage() {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }
    },
    // 过滤器
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        value = value.toString()
        // return value.charAt(0).toUpperCase() + value.slice(1)
        return 'capitalize'
      }
    },
    watch: {
      counter(nVal, old) {
        alert('new value is ' + nVal + 'old is ' + old + '!');
      },
      kilometers(val) {
        this.kilometers = val
        this.meters = this.kilometers * 1000
      },
      meters(val) {
        this.meters = val
        this.kilometers = val / 1000
      }
    }
  }
</script>

<style scoped>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>
